<template>
  <el-card style="margin-bottom:20px;">
    <div slot="header" class="clearfix">
      <span style="font-size:20px;font-weight:600;">基本信息</span>
      <el-button style="float: right;margin:0;" type="danger" @click.native="logout">登 出</el-button>
      <el-button style="float: right;margin:0;margin-right:1rem;" type="warning" @click.native="showDialog">修改密码</el-button>
    </div>

    <div v-if="userInfo" class="profile-box">
      <section class="basic-info-avatar">
        <el-avatar v-if="userInfo.avatar" :size="100" :src="userInfo.avatar" class="avatar" @click.native="dialogFormVisible2 = true;imageUrl = userInfo.avatar" />
        <el-avatar v-else :size="100" class="avatar" @click.native="dialogFormVisible2 = true">{{ userInfo.nickname }}</el-avatar>
        <el-divider class="divider" content-position="center">
          <h2 style="color: #f08d33;">{{ userInfo.organization.name }}</h2>
        </el-divider>
      </section>
      <div class="basic-info">
        <br>
        <el-divider content-position="right">
          <h3>{{ userInfo.nickname }}</h3>
          <h3 style="margin:0 1rem;">{{ userInfo.username }}</h3>
          <el-tag effect="light" size="mini" :type="userInfo.status | statusFilter">{{ userInfo.status | userStatusFilter }}</el-tag>
        </el-divider>
        <br>
        <el-divider content-position="right">
          <div class="userInfo-type-status">
            <h3 style="margin-right: 1rem;">{{ userInfo.job }}</h3>
            <h3 style="margin-right: 1rem;">L{{ userInfo.level }}</h3>
            <el-tag effect="dark" :type="userInfo.user_type | typeFilter">{{ userInfo.user_type | userTypeFilter }}</el-tag>
          </div>
        </el-divider>
      </div>
    </div>

    <el-divider content-position="center"><i class="el-icon-warning-outline" /></el-divider>
    <RadarChart />

    <el-dialog title="修改密码" :visible.sync="dialogFormVisible" :close-on-click-modal="false" :width="'50vw'">
      <el-form ref="dataForm" :rules="rules" :inline="true" :model="temp" label-position="right" label-width="200px">
        <el-form-item label="新密码" prop="new_password">
          <el-input v-model="temp.new_password" style="width:30vw;" />
        </el-form-item>
        <br>
        <el-form-item label="确认新密码" prop="password_confirm">
          <el-input v-model="temp.password_confirm" style="width:30vw;" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click.native="changePwd">
          确认
        </el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改上传头像" :visible.sync="dialogFormVisible2" :close-on-click-modal="false" :width="'30vw'">
      <section class="upload-section">
        <el-upload
          class="avatar-uploader"
          accept="image/png, image/jpeg"
          :action="baseURL + '/upload/file'"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>
      </section>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">
          取消
        </el-button>
        <el-button type="primary" @click.native="changeAvatar">
          确认
        </el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import { mapGetters } from 'vuex'
import { UserTypeMap, UserStatusMap, CommonTypeMap } from '@/utils/constant'
import RadarChart from './RadarChart'
import * as UserApi from '@/api/user'

const baseURL = process.env.VUE_APP_BASE_API + process.env.VUE_APP_BASE_PREFIX + process.env.VUE_APP_BASE_API_VERSION

export default {
  components: { RadarChart },
  filters: {
    statusFilter(status) {
      const statusMap = {
        'active': 'success',
        'inactive': 'warning',
        'suspend': 'danger'
      }
      return statusMap[status]
    },
    userStatusFilter(status) {
      return UserStatusMap[status]
    },
    typeFilter(type) {
      return CommonTypeMap[type]
    },
    userTypeFilter(type) {
      return UserTypeMap[type]
    }
  },
  props: {
    user: {
      type: Object,
      default: () => {
        return {
          name: '',
          avatar: '',
          phone: '',
          email: '',
          id_card: '',
          xd_key: '',
          role: []
        }
      }
    }
  },
  data() {
    return {
      baseURL,
      dialogFormVisible: false,
      dialogFormVisible2: false,
      imageUrl: '',
      temp: {
        new_password: '',
        password_confirm: ''
      },
      rules: {
        new_password: [{ required: true, message: '必须填写新密码', trigger: 'blur' }],
        password_confirm: [{ required: true, message: '必须填写确认新密码', trigger: 'blur' }]
      }
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  methods: {
    async logout() {
      const { session } = this.$store.state.user
      if (session) {
        await this.$store.dispatch('user/logoutWithSession').then(() => {
          this.$message.success('登出成功！')
        })
      } else {
        await this.$store.dispatch('user/logout').then(() => {
          this.$message.success('登出成功！')
        })
      }
      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
    },
    showDialog() {
      this.dialogFormVisible = true
      this.temp = {
        new_password: '',
        password_confirm: ''
      }
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = res.data
      console.log(file)
    },
    beforeAvatarUpload(file) {
      const isJPGorPNG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPGorPNG) {
        this.$message.error('上传头像图片只能是 JPG / PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPGorPNG && isLt2M
    },
    async changePwd() {
      const { data } = await UserApi.changePassword(this.temp)
      if (data) {
        await this.$notify({
          title: 'Success',
          message: '修改密码成功',
          type: 'success',
          duration: 2000
        })
        this.dialogFormVisible = false
      }
    },
    async changeAvatar() {
      const { data } = await UserApi.changeAvatar({ avatar: this.imageUrl })
      if (data) {
        await this.$notify({
          title: 'Success',
          message: '设置头像成功',
          type: 'success',
          duration: 2000
        })
        await this.$store.dispatch('user/getInfo')

        this.dialogFormVisible2 = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
h3 {
  display: inline-block;
}
.profile-box {
  display: flex;
  flex-wrap: wrap;
}

.avatar-uploader /deep/ .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader /deep/ .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
/deep/ .el-avatar {
  background: #fff;
}
.avatar {
  cursor: pointer;
  width: 178px;
  height: 178px;
  display: block;
}

.basic-info-avatar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .divider {
    width: 75%;
  }
}
.upload-section {
  display: flex;
  justify-content: center;
  align-items: center;
}

.basic-info {
  // width: calc(100% - 240px);
  width: 100%;
  // min-width: 300px;
  // margin-left: 20px;
  // padding-left: 20px;
  // margin-bottom: 20px;
}

.user-input /deep/ {
  input {
    padding-right: 40px;
    resize: none;
    border: none;
    border-radius: 0px;
    border-bottom: 1px solid #bfcbd9;
  }
}
</style>
